<template>
  <a-modal title="分类下的文章"
           :visible="visible"
           :footer="null"
           @cancel="emit('close')"
           width="80%" >
    <a-table :loading="loading"
             :data-source="articles"
             :columns="columns">
      <template #bodyCell="{column, record}">
        <template v-if="column.key === 'author'">
          {{ record.author.name }}
        </template>
      </template>
    </a-table>
  </a-modal>
</template>

<script setup>
import {ref, watch} from "vue";
import {apiGet} from "../../../../fentch";
import {message} from "ant-design-vue";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  },
  classifyId: {
    type: Number,
    required: true,
    default: 0
  }
})
const emit = defineEmits(['close'])

// 加载中
const loading = ref(false)
// 文章列表
const articles = ref([])
// 表格定义
const columns = [
  {key: 'id', title: 'ID', dataIndex: 'id'},
  {key: 'title', title: '标题', dataIndex: 'title'},
  {key: 'author', title: '作者', dataIndex: 'author'},
  {key: 'like_count', title: '点赞量', dataIndex: 'like_count'},
  {key: 'comment_count', title: '评论量', dataIndex: 'comment_count'},
  {key: 'created_at', title: '发布时间', dataIndex: 'created_at'}
]

// 自动检测id变化
watch(() => props.classifyId, (value, oldValue) => {
  if (value !== 0) {
    loading.value = true
    getClassifyArticle(value)
  }
})

// 获取当前分类下的文章
const getClassifyArticle = id => {
  apiGet(`/blogs/classify/${id}`).then(res => {
    if (res.data.code === 0) {
      articles.value = res.data.data
      loading.value = false
      return
    }
    message.error(res.data.message)
  })
}
</script>

<style scoped>

</style>